<template>
    <div class="question ">
       <p>问答管理  <span>我要提问</span></p>
        <ul class="tab">
            <li class="tab-item" :class="{active: i.id === selected}" v-for="i in tabList" :key="i.id" @click="selected = i.id">
          <span>
            {{i.name}}
          </span>
            </li>
        </ul>
        <div class="box-list">
           <p>你好？我想修复眼袋！我是2013年正月15做的现在眼下有皱纹！下踹！谢谢回复</p>
            <p><span>18小时前</span> <span>咨询</span><span>眼部整形</span> <span>眼部整形</span></p>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Question",
        data () {
            return {
                tabList: [
                    {id: 0, name: '等待回答'},
                    {id: 1, name: '已回答'},
                    {id: 2, name: '我的回答'},
                ],
                selected: 0,
            }
        }
    }
</script>

<style scoped lang="less">
    @import "../../../style/style";
 .question{
    >:first-child{
        color: @theme-color-dark;
        font-size: 18px;
        border-bottom: 2px solid @theme-color-dark;
        padding-bottom: 10px;
        span{
            padding: 5px 14px;
            color: white;
            background-color: @theme-color-dark;
            border-radius: 4px;
            float: right;
            margin-top: -5px;
        }
    }
     .tab {
         border: 1px solid @border-color;
         border-bottom: 0;
         background-color: #f5f5f5;
         margin-top: 20px;
         &:after {
             display: block;
             clear: both;
             content: "";
             visibility: hidden;
             height: 0;
         }
         .tab-item {
             float: left;
             width: 232px;
             height: 43px;
             line-height: 43px;
             text-align: center;
             color: #666;
             font-size: 12px;
             background-color: #f5f5f5;
             border-right: 1px solid @border-color;
             border-bottom: 1px solid @border-color;
             position: relative;
             cursor: pointer;
             &:last-child {
                 border-right-color: transparent;
             }
         }
         .tab-item.active {
             /*border-bottom-color: transparent;*/
             background-color: #fff;
             color:@theme-color-dark;
             font-size: 12px;
             border-bottom: 1px solid @border-color;
             &:before {
                 content: '';
                 width: 232px;
                 height: 3px;
                 background-color: @theme-color-dark;
                 position: absolute;
                 top: -1px;
                 left: 0;
             }
         }
     }
     .box-list{
         padding: 20px;
         color: #333333;
         font-size: 14px;
         border-bottom: 1px dashed @border-color;
         >:last-child{
             padding-top: 20px;
             position: relative;
             >:first-child{
                 color: #999999;
                 /*margin-left: 10px;*/
                 background-color:white;
                 border-radius:0;
                 border:none;
             }
             &:before {
                 content: '';
                 width: 5px;
                 height: 5px;
                 background-color: #999999;
                 position: absolute;
                 top: 28px;
                 left: 0px;
                 border-radius: 50%;
             }
             span{
                 background-color: #f0f0f0;
                 border-radius: 13px;
                 border: solid 1px #e0e0e0;
                 padding: 7px 16px;
                 margin-right: 30px;
             }
         }
     }
}
</style>